
<template>
  <el-container class="container">
    <el-header class="home-header">
      <el-row>
        <el-col :span="8">
          <img src="../../assets/images/logo.png" alt>
        </el-col>
        <el-col :span="8">
          <h1 class="h1">后台管理系统</h1>
        </el-col>
        <el-col class="right" :span="8">
          上海最牛班级32期
          <a href="#" @click.prevent="loginOut">退出</a>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="home-container">
      <el-aside class="home-container-aside" width="200px">
        <!--
          el-menu 父级菜单

          el-submenu  子级菜单 (可展开)

          el-menu-item  子级菜单

router激激活导航, 开启路由状态, index,代码apth

        -->
        <el-menu
          :router="true"
          :unique-opened="true"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#daa520"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户</span>
            </template>
            <el-menu-item index="/users">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限</span>
            </template>
            <el-menu-item index="/Roses">角色列表</el-menu-item>
            <el-menu-item index="/rights">权限列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="home-container-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    /**
     * 退出
     */
    loginOut () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang='less'>
.container {
  height: 100%;
  .home-header {
    padding: 0;
    background: skyblue;
    height: 60px;
    .h1 {
      text-align: center;
      line-height: 60px;
      font-size: 28px;
      color: #fff;
    }
    .right {
      text-align: right;
      padding-right: 40px;
      line-height: 60px;
      a {
        color: #daa520;
      }
    }
  }
  .home-container-aside {
    background: #ccc;
  }
}
</style>
